<script setup lang="ts">
import { ref } from 'vue'
import { useUserStore } from "@/store/modules/user";
import { useFoldStore } from "../../store/modules/useFold";
import { useRouter, useRoute } from "vue-router";
let $router = useRouter();
let foldStore = useFoldStore();
let userStore = useUserStore();
let $route = useRoute();

const switchKey = ref(false)
const color = ref('rgba(255, 69, 0, 0.68)')
const predefineColors = ref([
    '#ff4500',
    '#ff8c00',
    '#ffd700',
    '#90ee90',
    '#00ced1',
    '#1e90ff',
    '#c71585',
    'rgba(255, 69, 0, 0.68)',
    'rgb(255, 120, 0)',
    'hsv(51, 100, 98)',
    'hsva(120, 40, 94, 0.5)',
    'hsl(181, 100%, 37%)',
    'hsla(209, 100%, 56%, 0.73)',
    '#c7158577',
])


const full = () => {
    // dom 获取是否为全屏 不为全屏时为null
    let isFull = document.fullscreenElement
    if (!isFull) {
        document.documentElement.requestFullscreen()
    } else {
        document.exitFullscreen()
    }

}

const tiaozhuan = async () => {

    let backS = await userStore.backLogin()

    $router.push({
        path: "/login",
        query: {
            redirect: $route.path
        }
    })
}

const isDark = () => { 
    const html = document.documentElement;
    switchKey.value?html.className="dark":html.className=""
    
}

const changeTop = () => { 
    // 获取根结点
    const html = document.documentElement;
    // 设置某一属性的属性值
    html.style.setProperty('--el-color-primary', color.value)
}
</script>

<template>
    <div class="tabber_right">
        <el-button size="small" circle icon="Refresh" @click="foldStore.changeFresh"></el-button>
        <el-button size="small" circle icon="FullScreen" @click="full"></el-button>

        <!-- 设置颜色和黑暗模式 -->
        <el-popover placement="bottom" title="颜色和黑暗模式" :width="300" trigger="hover">
            <el-form>
                <el-form-item label="页面颜色" prop="">
                    <el-color-picker @change="changeTop" v-model="color" size="small" show-alpha :predefine="predefineColors" style="margin-left: 20px;"/>
                </el-form-item>
                <el-form-item label="黑暗模式" prop="">
                    <el-switch v-model="switchKey" class="mt-2" style="margin-left: 24px" inline-prompt active-icon="MoonNight"
                        inactive-icon="Sunny" @change="isDark" />
                </el-form-item>
            </el-form>

            <template #reference>
                <el-button size="small" circle icon="Setting" @click="console.log(123)"></el-button>
            </template>
        </el-popover>



        <img :src="userStore.avatar">
        <el-dropdown>
            <span class="el-dropdown-link">
                <span>{{ userStore.userName }}</span>
                <el-icon class="el-icon--right">
                    <arrow-down />
                </el-icon>
            </span>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item @click="tiaozhuan()">退出登录</el-dropdown-item>

                </el-dropdown-menu>
            </template>
        </el-dropdown>


    </div>
</template>

<style scoped lang="scss">
.tabber_right {
    width: 50%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: flex-end;
    line-height: 100%;

    span {
        line-height: 100%;
    }

    img {
        width: 24px;
        height: 24px;
        margin-left: 10px;
        margin-right: 10px;
    }
}
</style>